<template>
  <el-upload
      ref="importUpload"
      :action="`${action}`"
      :limit="limit"
      :accept="accept"
      :headers="headers"
      :drag="drag"
      :auto-upload="autoUpload"
      :disabled="disabledUpload"
      :on-progress="handleFileUploadProgress"
      :on-success="handleFileSuccess">
    <!--  :action="`${action}?updateSupport=${updateSupport}`"-->
    <i class="el-icon-upload" />
    <div class="el-upload__text">
      将文件拖到此处，或
      <em>点击上传</em>
    </div>
    <div v-if="accept" slot="tip" class="el-upload__tip flex" style="color: red">
      提示：仅允许导入{{ accept }}格式文件！
      <span class="font-rem-12 cor-main cursor-pointer" @click="importTemplate">下载模板</span>
    </div>
  </el-upload>
</template>
<script>
// js
import { getToken } from '@/utils/publicUtils/auth'
export default {
  props: {
    action: {
      type: String,
    },
    // 最大允许上传个数
    limit: {
      type: Number,
      default: 1
    },
    // 文件格式限制
    accept: {
      type: String,
      default: '.xlsx, .xls'
    },
    // 是否启用拖拽上传
    drag: {
      type: Boolean,
      default: true
    },
    // 是否在选取文件后立即进行上传
    autoUpload: {
      type: Boolean,
      default: false
    }
  },
  // --> ------ provideImportFile 文件导入接值  必加
  inject:['provideImportFile'],
  data() {
    return {
      // 是否禁用
      disabledUpload: false,
      // 请求头
      headers: {
        'tenant-id': localStorage.getItem('tenantId'),
        'x-auth-token': getToken()
      },
      // 是否更新已经存在的数据
      updateSupport: 0,
    }
  },
  methods: {
    /**
     * @description: 下載模板
     * @author: 张佳敏
     * @return {*}
     */
    importTemplate() {
      this.provideImportFile.importTemplate()
    },
    /**
     * @description: 文件上传中处理
     * @author: 张佳敏
     * @return {*}
     */
    handleFileUploadProgress(event, file, fileList) {
      this.disabledUpload = true
    },

    /**
     * @description: 文件上传成功处理
     * @author: 张佳敏
     * @return {*}
     */
    handleFileSuccess(response, file, fileList) {
      console.log(22)
      console.log(response)
      this.disabledUpload = false
      this.$refs.importUpload.clearFiles()
      this.$alert(response.msg, '导入结果', { dangerouslyUseHTMLString: true })
      if (response.code === 200) {
        this.provideImportFile.mixinsDialogImportSubmit('导入')
      }
    }
  }
}

</script>
<style scoped lang="scss">

</style>
